<template>
  <div>
    <!-- About Section -->
    <div class="selection-about">
      <div class="about-card">
        <div class="about-icon"><img src="../../assets/home/about-address.png" alt="Address"></div>
        <div>
          <div class="about-title">地址</div>
          <div class="about-desc">沈阳市于洪区沈胡路63号中港创业大厦 <br> 辽宁迈迪智能工业科技有限公司</div>
        </div>
      </div>
      <div class="about-card">
        <div class="about-icon"><img src="../../assets/home/about-phone.png" alt="Contact"></div>
        <div>
          <div class="about-title">联系方式</div>
          <div class="about-desc">13387839869</div>
        </div>
      </div>
      <div class="about-card">
        <div class="about-icon"><img src="../../assets/home/about-email.png" alt="Email"></div>
        <div>
          <div class="about-title">邮箱</div>
          <div class="about-desc">service@yamdyun.com</div>
        </div>
      </div>
    </div>

    <!-- Footer Section -->
    <div class="selection-footer">
      <div class="footer-content">
        <!-- 大国工匠和大国智造保持左右布局 -->
        <div class="footer-daguogj">
          <!-- <div class="daguogj-title">大国工匠-移动端</div> -->
          <div class="daguogj-title">迈迪智能-APP</div>
          <div class="footer-daguogj-prod">
            <div class="footer-daguogj-prod-img">
              <img src="../../assets/home/appIntroduction/maidi-app.jpg" alt="迈迪智能APP">
            </div>
            <div class="footer-daguogj-prod-text">扫码可下载“迈迪智能”APP，方便随时查询生产、供应链及资产信息，方便快捷实现供应链协同。</div>
          </div>
        </div>

        <div class="footer-daguogj" style="margin-left: 80px;">
          <!-- <div class="daguogj-title">大国智造-移动端</div> -->
          <div class="daguogj-title">优链商城-小程序</div>
          <div class="footer-daguogj-prod">
            <div class="footer-daguogj-prod-img">
              <img src="../../assets/home/appIntroduction/maidi-miniprograme.jpg" alt="优链商城小程序">
            </div>
            <div class="footer-daguogj-prod-text">扫码可直接登录“优链商城”小程序，通过手机可以随时查看产品信息，及时联系潜在客户，实现灵活的数字化工业品营销工作。</div>
          </div>
        </div>

        <!-- 工联院和数字工联改为上下布局 -->
        <div class="footer-qrcode-vertical">
          <div class="qrcode-title">迈迪智能</div>
          <div class="qrcode-img">
            <!-- <img src="../../assets/home/gonglianyuan.jpg" alt="工联院二维码"> -->
            <img src="../../assets/home/appIntroduction/maidizhineng.jpg" alt="迈迪智能二维码">
          </div>
          <div class="qrcode-desc">扫描二维码关注</div>
        </div>

        <div class="footer-qrcode-vertical">
          <div class="qrcode-title">蚁宝信链</div>
          <div class="qrcode-img">
            <!-- <img src="../../assets/home/shuzigl.jpg" alt="数字工联二维码"> -->
            <img src="../../assets/home/appIntroduction/yibaoxinlian.jpg" alt="蚁宝信链二维码">
          </div>
          <div class="qrcode-desc">扫描二维码关注我</div>
        </div>
        <div class="footer-yinsi">
          <a target="_blank" href="/article/83">隐私条款</a>
          <a class="yhxy" target="_blank" href="/article/84">用户协议</a>
        </div>
        <div class="footer-bottom">
          <div class="footer-bottom-container">
            <div class="footer-bottom-link">
              <a href="https://www.miit.gov.cn/" target="_blank">工业和信息化部</a>
              <a href="https://www.china-aii.com/" target="_blank">中国工业互联网研究院</a>
              <a href="https://www.global-dsc.cn/" target="_blank">全国装备制造业数字供应链平台官网</a>
            </div>
            <div class="footer-beian">
              <span>申请增值电信业务经营许可证</span>
              <a href="https://beian.miit.gov.cn/" target="_blank">辽ICP备2023002169号-1</a>
              <span>©辽宁迈迪智能工业科技有限公司  版权所有</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContactFooter',
  data() {
    return {
      // Add any reactive data here if needed
    }
  }
}
</script>

<style scoped>
/* About Section Styles */
.selection-about {
  width: 1200px;
  margin: 0 auto;
  /* padding-top: 20px; */
  display: flex;
  transform: translateY(70px);
}

.about-card {
  width: 480px;
  height: 142px;
  background-image: url('../../assets/home/about-bg1.png');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-card:nth-child(2) {
  background-image: url('../../assets/home/about-bg2.png');
}

.about-icon {
  margin-right: 18px;
}

.about-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: #f6b021;
  margin-bottom: 6px;
}

.about-card:nth-child(2) .about-title {
  color: #002e70;
}

.about-desc {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}

/* Footer Section Styles */
.selection-footer {
  width: 100%;
  background-image: url('../../assets/home/footer-bg.png');
  background-size: cover;
  background-position: center center;
  padding-top: 100px;
}

.footer-content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-daguogj {
  width: 300px;
  text-align: left; /* ycr 250621*/
}

.daguogj-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  color: #fff;
  margin-bottom: 20px;
}

.footer-daguogj-prod {
  display: flex;
  margin-top: 16px;
  align-items: center;
}

.footer-daguogj-prod-img {
  width: 82px;
  height: 82px;
}

.footer-daguogj-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-daguogj-prod-text {
  padding-left: 18px;
  font-weight: 400;
  font-size: 13px;
  line-height: 23px;
  color: #fff;
  opacity: 0.9;
  flex: 1;
}


.qrcode-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  color: #fff;
  margin-bottom: 20px;
}

.qrcode-img {
  width: 120px;
  height: 120px;
}

.qrcode-img img {
  width: 100%;
  height: auto;
}

.qrcode-desc {
  font-weight: 400;
  font-size: 12px;
  line-height: 26px;
  color: #fff;
  opacity: 0.8;
  margin-top: 10px;
  text-align: center;
}


.footer-bottom {
  border-top: 1px solid #6c87ad;
  width: 100%;
  line-height: 70px;
}
 .footer-bottom a {
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: #fff;
  padding-left: 8px;
  margin-left: 8px;
  border-left: 1px solid #6c87ad;
   text-decoration: none;
}





.footer-bottom .footer-beian {
  float: right;
}
.footer-bottom a:first-child {
  padding-left: 0;
  margin-left: 0;
  border-left: 0 none;
}
.footer-bottom span {
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: #fff;
}
/* 新增垂直布局的二维码样式 */
.footer-qrcode-vertical {
  width: 200px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 50px;
}

.footer-qrcode-vertical .qrcode-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  color: #fff;
  margin-bottom: 20px;
  order: 1; /* 标题在上 */
}

.footer-qrcode-vertical .qrcode-img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  order: 2; /* 图片在中间 */
}

.footer-qrcode-vertical .qrcode-desc {
  font-weight: 400;
  font-size: 12px;
  line-height: 26px;
  color: #fff;
  opacity: 0.8;
  margin-top: 10px;
  order: 3; /* 描述文字在下 */
}
.footer-yinsi{
  width: 100%;
  line-height: 70px;
  text-align: right;
   a {
     font-weight: 500;
     font-size: 13px;
     line-height: 20px;
     color: #fff;
     text-decoration: none;
   }
  .yhxy{
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #fff;
    padding-left: 8px;
    margin-left: 8px;
    border-left: 1px solid #6c87ad;
  }
}
.footer-bottom {
  border-top: 1px solid #6c87ad;
  width: 100%;
  padding: 20px 0;
}

.footer-bottom-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom-link {
  display: flex;
  align-items: center;
}

.footer-bottom-link a {
  color: #fff;
  font-size: 14px;
  margin-right: 15px;
  text-decoration: none;
}

.footer-bottom-link a:not(:first-child) {
  padding-left: 15px;
  border-left: 1px solid #6c87ad;
}

.footer-beian {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.footer-beian a {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 5px;
  text-decoration: none;
}

</style>